<template>
	<view class="btn" :class="[{isBorder:isBorder},type]">
		<slot>按钮</slot>
	</view>
</template>

<script setup lang="ts">
	defineProps({
		type: {
			type: String,
			default: 'primary'
		},
		isBorder: {
			type: Boolean,
			default: true
		}
	})
</script>

<style scoped lang="scss">
	.btn {
		display: inline-block;
		padding: 6rpx 18rpx;
		font-size: 24rpx;
		border-radius: 4rpx;

		&.isBorder {

			border: 2rpx solid transparent;

		}

		&.primary {
			color: $primary-color;
			border-color: $primary-color;
			background: rgba(46, 135, 255, 0.1);
		}

		&.checked {
			color: #fff;
			border-color: $primary-color;
			background-color: $primary-color;
		}

		&.no-checked {
			color: $info-color;
			border-color: #DDECFF;
			background: rgba(46, 135, 255, 0.1);
		}

		&.danger {
			color: $danger-color;
			border-color: $danger-color;
			background: rgba(235, 79, 81, 0.1);
		}

		&.info {
			color: $info-color;
			border-color: $info-color;
			background: rgba(152, 157, 165, 0.1);
		}

		&.green {
			color: #39B791;
			border-color: #39B791;
			background: rgba(83, 203, 167, 0.1);
		}
	}
</style>